前言

前一篇用HTML做的頁面，雖然可以呈現已有的文章，但無法新增新的東西上去，有按鈕可以一直按，但就只是一個紓壓用的按鈕，沒有任何實際作用。
因此接下來就是javascript的部分了，將傳進來的字再編輯到頁面上。

正文

首先，可以用document.getElementById()來擷取HTML資料。

var title =document.getElementById("title");

這樣就可以把id="title"的值傳進來，而上一篇當中，id="title"的便是第一行的input。
因此第一個input的值就會被傳進來。
同理：

var content =document.getElementById("content");
var btn = document.getElementById("btn");
var list = document.getElementById("list");

再來，我們的上傳是在輸入完後，按下按鈕的那瞬間，因此要感知到按鈕。
上面我們已經宣告btn會等於HTML的按鈕了。
接下來只要感知到按鈕觸發，就可以進行更新文章的動作。

btn.addEventListener("click")

這個便是可以感知到按鈕被按下的code，只要把要做的事情填進去即可。
要做的事情呢，就是要讓原本文章列表，多出一篇文章，底下的寫法是讓文章列表加上新的文章。

btn.addEventListener("click",function(){
    list.innerHTML = list.innerHTML +`
    <div class="article">
                <h2>${title.value}</h2>
                <p> ${content.value} </p>
            </div>
    `;
    })

最後可以再加上把輸入格清除的code，會比較人性化一點，要連去發文就不用打完又要刪掉。

 title.value = "";
 content.value = "";

全部的code如下：

var title =document.getElementById("title");
var content =document.getElementById("content");
var btn = document.getElementById("btn");
var list = document.getElementById("list");

btn.addEventListener("click",function(){
    list.innerHTML = list.innerHTML +`
    <div class="article">
                <h2>${title.value}</h2>
                <p> ${content.value} </p>
            </div>
    `;
    title.value = "";
    content.value = "";


})

這樣便完成可以讓新打的文章上傳，之後若有連接資料庫，就可以把文章寫進去，就能更完整的使用了。